// pages/video/video.js
import req from "../../utils/req";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navList: [],
    currentId: "",
    videoList: [],
    playVid: "",
    isTrigger: false,
  },

  // 用于监视用户上拉videoList列表触底操作，获取去更多数据
  handleScrollToLower() {
    setTimeout(() => {
      this.setData({
        videoList: [...this.data.videoList, ...this.data.videoList],
      });
    }, 500);
  },

  // 用于监视用户下拉videoList列表的操作，获取最新的数据
  async handlePullDownRefresh() {
    // console.log("handlePullDownRefresh");
    // 重新请求视频数据列表
    // 因为需要等函数中的所有代码执行完后才取消加载图标，所以需要用到await
    await this.getVideoList();
    this.setData({
      isTrigger: false,
    });
  },

  // 用于监视用户对image组件的点击操作，用于切换对应的video组件
  switchVideo(e) {
    // console.log(e);
    // 通过拿到id来更新data中的playVid
    const { id } = e.currentTarget;
    this.setData(
      {
        playVid: id,
        // 因为小程序setData更新数据是同步的，但是页面渲染是异步的，在setData中传入第二个实参，相当于vue中的nextTick
      },
      () => {
        // 创建video上下文对象
        const videoContext = wx.createVideoContext(id);
        // 播放当前视频
        videoContext.play();
      }
    );
  },

  // 用于监视用户点击导航栏操作，并切换下划线位置
  changeCurrentId(e) {
    console.log(e.currentTarget);
    // 获取到通过自定义属性，传入进来的当前点击项的id
    const { id } = e.currentTarget.dataset;
    this.setData({
      currentId: id,
      // 性能优化，让用户一上来可以看到白屏
      videoList: [],
    });
    wx.showLoading({
      title: "加载中，请稍等",
    });
    this.getVideoList();
  },

  // 用于请求视频列表数据
  async getVideoList() {
    // 此接口最麻烦的地方就是需要携带cookie，但是小程序不会自己携带cookie
    // 最终保存和发送cookie需要我们自己来
    const { datas } = await req("/video/group", { id: this.data.currentId });
    // 处理数据内容
    if (datas) {
      const videoList = datas.map((item) => {
        return item.data;
      });
      this.setData({
        videoList,
      });
    }
    // 数据请求回来之后结束loading
    wx.hideLoading();
  },

  // 监视视频播放操作
  handlePlay(e) {
    // console.log(e);
    const { id } = e.currentTarget;

    // 1.判断是否有值，如果没有值就是第一次播放
    // 2.判断当前id和上一次的id是否相同，相同就不暂停
    if (this.oldVid && this.oldVid !== id) {
      // 1.根据当前viedo组件的id，生成对应的上下文对象，用于操作对应的viedo组件
      const videoContext = wx.createVideoContext(this.oldVid);
      // 2.调用对应的api，可以操作对应的video组件
      videoContext.pause();
    }

    // 获取当前的vid，并保存起来
    this.oldVid = id;
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: async function () {
    // 当用户进入video页面，检查用户是否登陆，如果没有登录弹出模态对话框
    const cookie = wx.getStorageSync("cookie");
    if (!cookie) {
      wx.showModal({
        title: "请先登录",
        content: "该功能需要登录账号",
        cancelText: "回到首页",
        confirmText: "去登陆",
        success({ confirm, cancel }) {
          // 无论用户点击确定还是取消都会触发这个函数
          // 如果是点击确定confirm会为true，cancel为false
          if (confirm) {
            // 用户点击确定后会进入当前判断
            wx.navigateTo({
              url: "/pages/login/login",
            });
          } else {
            // 以为首页有tabBar，所以需要使用switchTab
            wx.switchTab({
              url: "/pages/index/index",
            });
          }
        },
      });
      // 如果没有登录就不需要执行下面的代码了
      return;
    }

    // 因为要请求完导航列表数据将导航列表数据中的ID在视频列表中使用，所以都需要写在onShow中
    // 请求导航列表数据
    const { data } = await req("/video/group/list");
    this.setData({
      navList: data.slice(0, 14),
      // 默认选中第一项数据
      currentId: data[0].id,
    });

    // 请求视频列表数据
    this.getVideoList();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    // console.log("onPullDownRefresh");
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({ from, target }) {
    // 需求：根据用户触发渠道的不同，自定义转发内容
    // 如果是右上角的转发按钮，就转发小程序名称+小程序logo+首页链接
    // 如果是button转发按钮，就转发当前视频名称+视频图片+video地址
    // from代表的是触发当前回调函数的来源
    // target代表的是平常点击事件中的e.currentTarget
    // console.log(from, target);

    if (from === "menu") {
      return {
        title: "网抑云",
        page: "/pages/index/index.js",
        imageUrl: "/static/images/logo.png",
      };
    } else if (from === "button") {
      // 自定义属性只能使用小写，使用大写命名也会自动转为小写
      const { title, imageurl } = target.dataset;
      return {
        title,
        page: "/pages/video/video.js",
        imageUrl: imageurl,
      };
    }
  },
});
